<template>
  <!-- 广场页面 -->
  <view>
    <view class="navigator-box">
      
    </view>
    <view class="title">
      <text :class="iscolor==i?'active':''" v-for="(item,i) in list" :key="i" @click="btntitle(i)">{{item.title}}</text>
    </view>
    <!-- 榜单 -->
    <view class="xinshou" v-if="iscolor==0">
      <!-- 币币榜合约榜 -->
        <view class="bang">
          <view class="bang-box">
            <view class="bibi-text" :class="bangisshow?'heyue-text':''" @click="bangbtn">币币榜</view>
            <view class="bibi-text" :class="!bangisshow?'heyue-text':''" @click="bangbtn">合约榜</view>
          </view>
        </view>
        <!-- 币币榜合约榜结束 -->
        <!-- 列表内容开始 -->
        <view class="bang-con" v-if="bangisshow">
          <view class="bang-list" @click="gendanlnitiator">
            <view class="bang-img">1</view>
            <view class="wang-top">
              <view class="">
                <view class="">
                  <text class="bang-title">海浪网格</text>
                  <text class="bibi">币币</text>
                </view>
                <text>Binance(SRM/USDT)</text>
              </view>
              <view class="kaifang-right">
                <u-button  v-if="iskaifang" type="primary" size="mini" :plain="true" shape="circle" @click="yijiangendan">跟单</u-button>
                <u-button v-else size="mini" :plain="true" shape="circle">未开放</u-button>
              </view>
            </view>
            <view class="bang-center">
              <view class="touru-left">
                <view class="touru-text">
                  200
                </view>
                <text>总投入(USDT)</text>
              </view>
              <view class="touru-center">
                <view class="touru-text">
                  200
                </view>
                <text>总收益(USDT)</text>
              </view>
              <view class="touru-right">
                <view class="touru-txt">
                  200
                </view>
                <text>年化收益率(USDT)</text>
              </view>
            </view>
            <view class="bang-bottom">
              <view class="bang-bottom-left">
                <image src="../../static/active-home.png" mode=""></image>
                <text>130****3265s</text>
              </view>
              <text>1天12时44分</text>
            </view>
          </view>
     
       </view>
        <!-- 列表内容结束 -->
        <view class="bang-con" v-else>
          <view class="bang-list" @click="gendanlnitiator">
            <view class="bang-img">1</view>
            <view class="wang-top">
              <view class="">
                <view class="">
                  <text class="bang-title">海浪网格</text>
                  <text class="bibi">币币</text>
                </view>
                <text>Binance(SRM/USDT)</text>
              </view>
              <view class="kaifang-right">
                <u-button v-if="iskaifang" type="primary" size="mini" :plain="true" shape="circle">已开放</u-button>
                <u-button v-else type="info" size="mini" :plain="true" shape="circle">未开放</u-button>
              </view>
            </view>
            <view class="bang-center">
              <view class="touru-left">
                <view class="touru-text">
                  200
                </view>
                <text>总投入(USDT)</text>
              </view>
              <view class="touru-center">
                <view class="touru-text">
                  200
                </view>
                <text>总收益(USDT)</text>
              </view>
              <view class="touru-right">
                <view class="touru-txt">
                  200
                </view>
                <text>年化收益率(USDT)</text>
              </view>
            </view>
            <view class="bang-bottom">
              <view class="bang-bottom-left">
                <image src="../../static/active-home.png" mode=""></image>
                <text>130****3265s</text>
              </view>
              <text>1天12时44分</text>
            </view>
          </view>
          
        </view>
    </view>
    <!-- 快讯 -->
    <view class="xinshou" v-if="iscolor==1">
      <view class="kuaixun-time">
        <text>今天2102/09/11星期六</text>
      </view>
      <view class="kuaixun-list">
        <view class="kuaixun-title">Loot创始人推出新链游宠物项目 WAGMIGOTCHI</view>
        <view class="kuaixun-con">
          9月11日消息，Loot创始人宣布推出新链游宠物项目WAGMIGOTCHI，玩家可选择进行Clean(清洁)、Feed(饲料)、Play(游戏)、Sleep(睡眠)四个选项，对应宠物的清洁程度、饥饿程度、无聊程度，以及困倦程度，玩家需满足宠物以上要求以维持宠物生命。(来源：金色财经)
        </view>
        <view class="kuaixun-bottom">
          <view class="con-time">2021/09/11</view>
          <view class="kuaixun-right">
            <view class="jubao-left">
              <text>举报</text>
              <u-icon class="jubao-icon" name="close-circle"></u-icon>
            </view>
            <view class="">
              <text>分享</text>
              <u-icon class="jubao-icon" name="zhuanfa"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="kuaixun-list">
        <view class="kuaixun-title">Loot创始人推出新链游宠物项目 WAGMIGOTCHI</view>
        <view class="kuaixun-con">
          9月11日消息，Loot创始人宣布推出新链游宠物项目WAGMIGOTCHI，玩家可选择进行Clean(清洁)、Feed(饲料)、Play(游戏)、Sleep(睡眠)四个选项，对应宠物的清洁程度、饥饿程度、无聊程度，以及困倦程度，玩家需满足宠物以上要求以维持宠物生命。(来源：金色财经)
        </view>
        <view class="kuaixun-bottom">
          <view class="con-time">2021/09/11</view>
          <view class="kuaixun-right">
            <view class="jubao-left">
              <text>举报</text>
              <u-icon class="jubao-icon" name="close-circle"></u-icon>
            </view>
            <view class="">
              <text>分享</text>
              <u-icon class="jubao-icon" name="zhuanfa"></u-icon>
            </view>
          </view>
        </view>
      </view>

    </view>
    <!-- 新手指南 -->
    <view class="xinshou" v-if="iscolor==2">
      <view class="canshu-box">
        <!-- Vtrading使用教程 -->
        <view class="canshu-title">
          <view class="canshu" @click="argsetting">
            <text class="canshu-left">Vtrading使用教程</text>
            <view class="">
              <u-icon v-if="arg" color="#878698" name="arrow-up"></u-icon>
              <u-icon v-else color="#878698" name="arrow-down"></u-icon>
            </view>
          </view>
        </view>
        <view class="" v-if="arg">
          <!-- 内容数据 -->
          <view class="canshu-con" @click="zhinandetail"><text class="dots">•</text>Vtrading教你一分钟启动量化策略交易<text></text>
          </view>
        </view>
      </view>
      <view class="canshu-box">
        <!-- Vtrading使用教程 -->
        <view class="canshu-title">
          <view class="canshu" @click="argsetting">
            <text class="canshu-left">Vtrading使用教程</text>
            <view class="">
              <u-icon v-if="arg" color="#878698" name="arrow-up"></u-icon>
              <u-icon v-else color="#878698" name="arrow-down"></u-icon>
            </view>
          </view>
        </view>
        <view class="" v-if="arg">
          <!-- 内容数据 -->
          <view class="canshu-con" @click="zhinandetail"><text class="dots">•</text>Vtrading教你一分钟启动量化策略交易<text></text>
          </view>
        </view>
      </view>
    </view>
    <!-- 策略学堂 -->
    <view class="xinshou" v-if="iscolor==3">
      <view class="xuetang-list" v-for="(item,i) in xuetanglist" :key="i" @click="xuetangdetail">
        <view class="xuetang-left">
          <view class="xuetang-title">{{item.title}}</view>
          <view class="xuetang-time">
            <text>{{item.time}}</text>
            <text>{{item.count}}次浏览</text>
          </view>
        </view>
        <view class="xuetang-right">
          <image :src="item.picurl" mode=""></image>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        iskaifang:true, // 按钮已开放、未开放
        bangisshow:true,
        enables: true,
        arg: true, // 参数设置的显示与隐藏
        iscolor: '',
        list: [{
          title: '榜单'
        }, {
          title: '快讯'
        }, {
          title: '新手指南'
        }, {
          title: '策略学堂'
        }],
        // 策略学堂的数据
        xuetanglist: [{
          title: '每期十问，带你玩转量化策略交易(四)',
          time: '2021/02/01',
          count: 234,
          picurl: '../../static/bg2.png'
        }, {
          title: '每期十问，带你玩转量化策略交易(四)',
          time: '2021/02/01',
          count: 234,
          picurl: '../../static/bg2.png'
        }, {
          title: '每期十问，带你玩转量化策略交易(四)',
          time: '2021/02/01',
          count: 234,
          picurl: '../../static/bg2.png'
        }]
      }
    },
    methods: {
      btntitle(i) {
        this.iscolor = i
      },
      // 跳转到策略学堂详情页面
      xuetangdetail() {
        uni.navigateTo({
          url: '../../subpkg/celuexuetang-detail/celuexuetang-detail'
        })
      },
      // 参数设置的展开与关闭
      argsetting() {
        this.arg = !this.arg
      },
      // 新手指南详情
      zhinandetail() {
        uni.navigateTo({
          url: '../../subpkg/zhinan-detail/zhinan-detail'
        })
      },
      // 币币榜合约榜切换
      bangbtn(){
        this.bangisshow=!this.bangisshow
      },
      // 跳转到跟单发起人页面
      gendanlnitiator(){
        uni.navigateTo({
          url: '../../subpkg/gendanInitiator/gendanInitiator'
        })
      },
      yijiangendan(){
        uni.navigateTo({
          url:'../../subpkg/yijiangendan/yijiangendan'
        })
      }
    }
  }
</script>

<style>
  page {
    /* margin-top: 88rpx; */
  }
.navigator-box{
  height: 66rpx;
  background-color: #FFFFFF;
  color:"#FFFFFF";
  margin-bottom: 80rpx;
  z-index: 999;
}
  .title {
    position: fixed;
    top: 66rpx;
    display: flex;
    justify-content: space-around;
    width: 100%;
    font-size: 32rpx;
    color: #b3bedf;
    padding: 20rpx 0;
    background-color: #091430;
    z-index: 999;
  }

  .xinshou {
    margin-top: 88rpx;
  }

  .active {
    color: #FFFFFF;
    font-size: 36rpx;
  }

  .xuetang-list {
    height: 230rpx;
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40rpx;
  }

  .xuetang-right {
    width: 220rpx;
    height: 140rpx;
    overflow: hidden;
    margin-left: 10rpx;
  }

  .xuetang-right image {
    width: 100%;
    height: 100%;

  }

  .xuetang-title {
    font-size: 32rpx;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
  }

  .xuetang-time {
    display: flex;
    justify-content: space-between;
    color: #868696;
    margin: 20rpx 0;
  }

  .canshu-box {
    margin: 30rpx;
    border-bottom: 1px solid #161616;
  }
  .canshu-box:nth-child(1){
    margin-top: 120rpx;
  }

  .canshu-title {
    margin-bottom: 40rpx;
  }

  .canshu-left {
    font-size: 34rpx;
    color: #FFFFFF;
    margin-right: 20rpx;
  }

  .canshu {
    display: flex;
    justify-content: space-between;
  }

  .canshu-con {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #FFFFFF;
    margin: 20rpx 0 30rpx;
  }

  .dots {
    margin: 0 30rpx;
  }

  .kuaixun-time {
    position: fixed;
    top: 110rpx;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    color: #FFFFFF;
    padding: 0 50rpx;
    margin: 20rpx 0;
    background-color: #000000;
    z-index: 999;
  }

  .swip {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .kuaixun-list {
    margin: 40rpx 20rpx;
    background-color: #12192c;
    color: #FFFFFF;
    padding: 40rpx 30rpx;
    border-radius: 20rpx;
  }

  .kuaixun-list:nth-child(2) {
    margin: 150rpx 20rpx 0;
  }

  .kuaixun-title {
    font-size: 34rpx;
  }

  .kuaixun-con {
    line-height: 44rpx;
  }

  .kuaixun-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    font-size: 24rpx;
  }

  .kuaixun-right {
    display: flex;
  }

  .jubao-icon {
    margin: 0 10rpx;
  }

  .jubao-left {
    margin-right: 30rpx;
  }

  .con-time {
    color: #8e93a6;
  }

  .swiper-top {
    width: 100%;
    height: 0;
    margin-bottom: 100rpx;
  }

  .bangdan-title {
    position: fixed;
    top: 100rpx;
    width: 100%;
    height: 100rpx;
    background-color: #007AFF;
  }
  .bang{
    display: flex;
    justify-content: center;
    position: fixed;
    top: 160rpx;
    width: 100%;
    padding: 20rpx 0 30rpx;
    background-color: #000000;
    z-index: 999;
  }
  .bang-box{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background-color: #131a2c;
    width: 320rpx;
    height: 70rpx;
    border-radius: 40rpx;
    font-size: 32rpx;
  }
  .bibi-text{
    width: 160rpx;
    height: 100%;
    line-height: 70rpx;
    text-align: center;
    border-radius: 40rpx;
  }
  .heyue-text{
    background-color: #007AFF;
  }
  .bang-con{
    padding: 130rpx 20rpx 0;
  }
  .bang-list{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 360rpx;
    width: 100%;
    background-color: #131a2a;
    border-radius: 30rpx;
    overflow: hidden;
    padding: 20rpx;
    color: #7f8599;
    font-size: 26rpx;
    margin-bottom: 16rpx;
  }
  .bang-img{
    position: absolute;
    left: 0;
    top: 0;
    width: 56rpx;
    height: 36rpx;
    line-height: 36rpx;
    background-color: #ffd900;
    border-radius: 30rpx 0 30rpx;
    color: #142741;
    font-weight: bold;
    text-align: center;
  }
  .wang-top{
    display: flex;
    justify-content: space-between;
  }
  .bang-title{
    font-size: 32rpx;
    color: #FFFFFF;
  }
  .bibi{
    font-size: 24rpx;
    background-color: #172145;
    margin-left: 10rpx;
    padding: 4rpx 8rpx;
    color: #007AFF;
  }
  .bang-bottom{
    display: flex;
    justify-content: space-between;
  }
  .bang-bottom-left image{
    width: 40rpx;
    height: 40rpx;
    vertical-align: middle;
    margin-right: 10rpx;
  }
  .bang-center{
    display: flex;
    justify-content: space-between;
  }
  .touru-text{
    font-size: 34rpx;
    color: #FFFFFF;
  }
  .touru-txt{
    color: #08B195;
    font-size: 34rpx;
  }
  .touru-right{
    text-align: right;
  }
</style>
